﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Admin.Master" AutoEventWireup="true" CodeBehind="mapdesigner.aspx.cs" Inherits="GameAdmin.Pages.mapdesigner" %>
<asp:Content ID="Content1" ContentPlaceHolderID="plcHolderContent" runat="server">
    <h2>Map designer, lvl č.: <asp:Literal ID="literalRoundId" runat="server" /></h2>

    <asp:Label ID="lblMessage" Visible="false" runat="server" />

    <div id="designerTopPanel">
        Pozice kurzoru: <input type="text" readonly="readonly" id="currentCoordsBox" />

        <div id="fieldTypePicker">
            <asp:Image ImageUrl="~/Img/Fields/Wall.png" AlternateText="wall" class="fieldOption" typeid="0" runat="server" />
            <asp:Image ImageUrl="~/Img/Fields/Cell.png" AlternateText="empty" class="fieldOption" typeid="1" runat="server" />
            <asp:Image ImageUrl="~/Img/Fields/Guardian.png" AlternateText="guardian" class="fieldOption" typeid="2" runat="server" />
            <asp:Image ImageUrl="~/Img/Fields/Question.png" AlternateText="question" class="fieldOption" typeid="3" runat="server" />
            <asp:Image ImageUrl="~/Img/Fields/Exit.png" AlternateText="exit" class="fieldOption" typeid="9" runat="server" />

            <asp:DropDownList ID="ddListDifficulties" runat="server">
                <asp:ListItem Text="1" Value="1" />
                <asp:ListItem Text="2" Value="2" />
                <asp:ListItem Text="3" Value="3" />
                <asp:ListItem Text="4" Value="4" />
            </asp:DropDownList>

            Radius: <asp:TextBox ID="txtRadius" runat="server" />
        </div>
    </div>

    <asp:Panel ID="pnl" runat="server" />

    <asp:Label ID="lblId" style="display:none;" runat="server" />

    <div id="toolbox" style="width:770px; margin:0 auto; clear:both;">
        <asp:Button ID="btnSave" Text="Uložit" runat="server" />
        <asp:HyperLink ID="lnkLevelEdit" Text="Návrat na editaci parametrů" runat="server" />
        <asp:HyperLink ID="lnkRevert" Text="Zrušit veškeré změny" runat="server" />
        <asp:Button ID="btnClearAllFields" Text="Vynulovat herní plán" runat="server" />
    </div>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="plcHolderScripts" runat="server">
    <script type="text/javascript">
        var selectedField;

        $(document).ready(function () {
            // busy indicator
            $('body').append('<div id="ajaxBusy"><p><img src="/Img/ajax-loader2.gif"></p></div>');

            $('#ajaxBusy').css({
                display: "none",
                margin: "0px",
                paddingLeft: "0px",
                paddingRight: "0px",
                paddingTop: "0px",
                paddingBottom: "0px",
                position: "absolute",
                left: "50%",
                top: "50%",
                width: "auto"
            });

            $(".field").mouseover(function () {
                // display mouse coords
                var coords = $(this).attr("coords");
                $("#currentCoordsBox").val(coords);
            });

            $("#pnl").mouseleave(function () {
                // clear the textbox
                $("#currentCoordsBox").val("");
            });

            // right click
            $(".field").bind("contextmenu", function () {
                if ($(this).attr("border") != "true") {
                    var clickedField = $(this);

                    if (clickedField.attr("type") == "empty") {
                        clickedField.attr("type", "wall");
                        clickedField.attr("typeid", "0");
                    }
                    else if (clickedField.attr("type") == "wall") {
                        clickedField.attr("type", "empty");
                        clickedField.attr("typeid", "1");
                    }
                }
                return false; // disable contextmenu on fields
            });

            $(".field").click(function () {
                // don't do anything if the field is part of the surrounding border !
                if ($(this).attr("border") != "true") {
                    // set currently selected field
                    if (selectedField != null) selectedField.css("background", "");
                    selectedField = $(this);
                    selectedField.css("background", "#000");

                    // display the picker and be sure values are default or set to those already set values
                    $("#fieldTypePicker").css("display", "block");

                    if ($(this).attr("type") == "guardian") {
                        $("#txtRadius").val($(this).attr("radius"));
                        $("#ddListDifficulties option").filter(function () { return $(this).text() == selectedField.attr("difficulty"); }).attr('selected', true);
                    }
                    else if ($(this).attr("type") == "question") $("#ddListDifficulties option").filter(function () { return $(this).text() == selectedField.attr("difficulty"); }).attr('selected', true);
                    else {
                        $("#txtRadius").val("");
                        $("#ddListDifficulties option").filter(function () { return $(this).text() == "1"; }).attr('selected', true);
                    }
                }
            });

            $(".fieldOption").click(function () {
                if (selectedField != null) {
                    var option = $(this);
                    var txtRadius = $("#txtRadius");
                    var ddl = $("#ddListDifficulties");
                    var type = $(this).attr("alt");

                    // check to prevent adding a guardian without radius
                    if (type == "guardian" && txtRadius.val() == "") {
                        alert("Musíte zadat radius!");
                        return;
                    }
                    else if (type == "guardian" && (txtRadius.val() > 35 || txtRadius.val() < 1)){
                        alert("Radius může být jen v rozmezí 1-35!");
                        return;
                    }

                    selectedField.attr("type", type);

                    if (type == "guardian") {
                        selectedField.attr("radius", txtRadius.val());
                        selectedField.attr("difficulty", ddl.val());
                    }
                    else if (type == "question") selectedField.attr("difficulty", ddl.val());
                }

                // undo some changes (background, values etc)
                selectedField.css("background", "");
                selectedField = null;
                $("#txtRadius").val("");
                $("#ddListDifficulties option").filter(function () { return $(this).text() == "1"; }).attr('selected', true);
                $("#fieldTypePicker").css("display", "none");
            });

            $("#lnkLevelEdit").click(function () {
                return confirm("Jste si jistý? Vykonané změny v mapě sa neuloží!");
            });

            $("#lnkRevert").click(function () {
                return confirm("Jste si jistý? Vykonané změny v mapě sa neuloží a level bude ve stavu jako před začátkem editace!");
            });

            $("#btnClearAllFields").click(function () {
                return confirm("Jste si jistý? Tato akce sa nedá vrátit a vymaže všechny přiřazené pole k tomuto levelu!");
            });

            $("#btnSave").click(function () {
                // get actual fields
                var fields = $("#pnl").children("*").children("*");

                if (CheckForExit(fields) == false) {
                    alert("Nezadali jste východ!");
                    return false;
                }

                // parse the html to a custom format (atribute1-atribute2-atribute3-....) for parsing on the server-side
                var serialized = '';
                fields.each(function (i) {
                    serialized += $(this).attr("coords") + "-"; // coords
                    serialized += $(this).attr("type");   // type name

                    if ($(this).attr("radius") != undefined) {
                        serialized += "-" + $(this).attr("radius");
                    }
                    
                    if ($(this).attr("difficulty") != undefined) {
                        serialized += "-" + $(this).attr("difficulty");
                    }

                    if (i != fields.length - 1) serialized += ";";
                });

                // post the values to parse on the server-side
                $.ajax({
                    type: "POST",
                    url: "/Services/DesignerService.asmx/UpdateFields",
                    data: JSON.stringify({ roundId: $("#lblId").text(), serializedFields: serialized }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        alert(msg.d);
                    },
                    error: function (e) {
                        alert(e.status + " " + e.statusText);
                    }
                });

                return false;
            });

            $("#txtRadius").keydown(function (event) {
                // Allow: backspace, delete, tab, escape, and enter
                if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                // Allow: Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true)) {
                    // let it happen, don't do anything
                    return;
                }
                else {
                    // Ensure that it is a number and stop the keypress
                    if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                        event.preventDefault();
                    }
                }
            });
        });

        function CheckForExit(fields) {
            var exists = false;

            fields.each(function (i) {
                if ($(this).attr("type") == "exit") exists = true;
            });

            return exists;
        }

        // Ajax activity indicator bound to ajax start/stop document events
        $(document).ajaxStart(function(){ 
            $('#ajaxBusy').show(); 
        }).ajaxStop(function(){ 
            $('#ajaxBusy').hide();
        });
    </script>
</asp:Content>
